<template>
  <div class="person">
    <div class="btnM">登陆</div>
    <div style="clear:both;"></div>
    <h1>登陆</h1>
    <mt-field :attr="{ minlength: 3}" label="用户名" placeholder="请输入用户名" v-model="userName"></mt-field>
    <mt-field :attr="{ minlength: 6}" label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <router-link :to="{ name: 'Person'}" class="haha">没有账号，我要注册</router-link>
    <mt-button @click="loginClick()" size="large" type="primary" class="btnC">登陆</mt-button>
  </div>
</template>

<script>
import { Field } from 'mint-ui';
import { Toast } from 'mint-ui'
import { login } from '../services/product_type';
import cookie from 'js-cookie';

export default {
  name: 'login',
  data() {
    return {
      userName: '',
      password: '',
    };
  },
  methods: {
    loginClick() {
      if (this.userName === '') {
        Toast({
          message: '用户名不能为空',
          position: 'middle',
          duration: 2000,
        });
        return;
      }
      if (this.password === '') {
        Toast({
          message: '密码不能为空',
          position: 'middle',
          duration: 2000
        });
        return;
      }
      login({
        userName: this.userName,
        password: this.password
      }).then((res) => {
        console.log(res);
        if (res.data.status == 'Y') {
          cookie.set('userName', this.userName, {
            expires: 7,
          })
          cookie.set('sex', res.data.info[0].sex, {
            expires: 7,
          })
          this.$router.push({
            name: 'mp',
          })
        } else {
          Toast({
          message: res.data.msg,
          position: 'middle',
          duration: 5000
        });
        }
      })
      .catch(err => {
        console.log(err);
      })
    }
  }
}
</script>
<style <style scoped>
.person{
  text-align: center;
}
.haha{
  float: right;
  text-decoration: none;
  font-size: 0.6rem;
}
.btnC{
  margin-top: 5rem;
}
.btnM{
  float: left;
  width: 3rem;
  font-size: 0.6rem;
  background-color: rgb(244, 244, 244);
}
</style>

